<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>富文本编辑器</title>
</head>
<body>
<fieldset>
    <legend>编辑区</legend>
    <div>
        <form>
            字体颜色：
            <select onchange="setFontColor(this)">
                <option value="black">Black    </option>
                <option value="red">Red   </option>
                <option value="green">Green    </option>
                <option value="blue">Blue    </option>
            </select>
            字体样式：
            <select onchange="setFontStyle(this)">
                <option value="bold">Bold    </option>
                <option value="italic">Italic   </option>
                <option value="underline">Underline    </option>
                <option value="striketthrough">StriketThrough    </option>
            </select>
            字体名称：
            <select onchange="setFontFamily(this)">
                <option value="serif">Serif    </option>
                <option value="sans-serif">Sans-serif   </option>
                <option value="monospace">Monospace    </option>
                <option value="comic sans ms">Comic Sans    </option>
            </select>
        </form>
    </div>
    <br/>
    <div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc">
    </div>
</fieldset>
<button onclick="richText.back()">返回</button>
<button style="display:none;" id="create" onclick="richText.create()">新建</button>
<button style="display: none" id="editor" onclick="richText.editor()">保存</button>
<script type="text/javascript">
    function setFontColor(obj) {
        document.execCommand("forecolor",false,obj.value);
    }
    function setFontStyle(obj) {
        document.execCommand(obj.value,false,null);
    }
    function setFontFamily(obj) {
        document.execCommand("fontname",false,obj.value);
    }
</script>
<script src="../js/script_min.js"></script>
<script src="../js/util.js"></script>
<script>
    class richTextEditor{
        constructor(args){
            this.type = args.type;
            this.position = args.position;
        }
        back(){
            window.history.go(-1);
        }
        create(){
            ServerAgent.invoke("richText-create",{
                content:$('#editableText').html(),
                position:this.position,
                type:this.type
            }).then(res=>{
                alert(`创建成功:${res}`);
                this.back();
            })
        }
        editor(){
            ServerAgent.invoke("richText-editor",{id:this.richId,content:$('#editableText').html()}).then(res=>{
                alert(`修改成功`);
            });
        }
        getContent(){
            if(this.position){
                ServerAgent.invoke("richText-get",{type:this.type,position:this.position}).then(res=>{
                    $('#editableText').html(res.args.content);
                    this.richId = res.args.id;
                    $('#editor').toggle();
                }).catch(e=>{
                    $('#create').toggle();
                });
            }else{
                if(!this.type||!this.position){
                    alert(`新建文本所需参数不全`);
                    this.back();
                }else {
                    $('#create').toggle();
                }
            }
        }
    }
    let richText = new richTextEditor(getParams());
    richText.getContent();
</script>
</body>
</html>